<template>
  <view class="colorB padding-10  ">
    <uni-title title="营收总报" type="h2" />
    <view class="border-10 mainColor" style="margin-top: 20rpx;">
      <view class="padding-10" v-if="merchantOrderReport == null">暂无数据</view>
      <block v-else>
        <view class="flex justify-between padding-10">
          <view>用电度数：{{merchantOrderReport.useElectricity}}度</view>
          <view>充电次数：{{merchantOrderReport.chargeNum}}次</view>
        </view>
        <view class="flex justify-between padding-10">
          <view>充电时长：{{merchantOrderReport.chargeTime}}分钟</view>
          <view>电费金额：{{merchantOrderReport.electricityAmount}}元</view>
        </view>
        <view class="flex justify-between padding-10">
          <view>服务费金额：{{merchantOrderReport.serviceAmount}}元</view>
          <view>收入金额：{{merchantOrderReport.totalAmount}}元</view>
        </view>
        <view class="flex justify-between padding-10">
          <view>交易金额：{{merchantOrderReport.tradeAmount}}元</view>
          <view>交易手续费：{{merchantOrderReport.tradeFee}}元</view>
        </view>
        <view class="padding-10">虚拟金额：{{merchantOrderReport.virtualAmount}}元</view>
      </block>
    </view>
    <uni-title title="营收日报" type="h2" />
    <view class="border-10 mainColor">
      <uni-datetime-picker v-model="range" type="daterange" @change="maskClick" />
    </view>
    <view class="border-10 mainColor" v-for="(item,index) in reportList" :key="index"
      style="margin: 20rpx 0;border:1px solid #fff">
      <view class="padding-10">交易日期：{{item.tradeDate}}</view>
      <view class="padding-10">站点名称：{{item.stationName}}</view>
      <view class="flex justify-between padding-10">
        <view>用电度数：{{item.useElectricity}}度</view>
        <view>充电次数：{{item.chargeNum}}次</view>
      </view>
      <view class="flex justify-between padding-10">
        <view>充电时长：{{item.chargeTime}}分钟</view>
        <view>电费金额：{{item.electricityAmount}}元</view>
      </view>
      <view class="flex justify-between padding-10">
        <view>服务费金额：{{item.serviceAmount}}元</view>
        <view>收入金额：{{item.totalAmount}}元</view>
      </view>
      <view class="flex justify-between padding-10">
        <view>交易金额：{{item.tradeAmount}}元</view>
        <view>交易手续费：{{item.tradeFee}}元</view>
      </view>
      <view class="padding-10">虚拟金额：{{item.virtualAmount}}元</view>

    </view>
    <pagination v-if="total>0" :total="total" :queryParams="queryParams" @changeAdd="invoiceAdd" @reset="invoiceReset"
      @changeNum="invoiceChange"></pagination>
  </view>
</template>

<script>
  import getDateTime from '@/common/time.js'
  import {
    getMerchantOrderReport,
  } from "@/api/adapayMember/adapayMember";
  export default {
    props: ['merchantId'],
    data() {
      return {
        range: [],
        createTimeRange: [],
        reportList: [],
        merchantOrderReport: {},
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          merchantId: this.merchantId,
          startTime: '',
          endTime: ''
        },
      }
    },
    methods: {
      invoiceAdd() {
        console.log('add事件');
        this.reportList = []
        this.queryParams.pageSize += 10
        console.log(this.queryParams.pageSize, '添加');
        this.getList()
      },
      invoiceReset() {
        console.log('reset 事件');
        this.reportList = []
        this.queryParams.pageSize = 10
        this.queryParams.pageNum = 1
        this.getList()
      },
      invoiceChange(e) {
        this.queryParams.pageNum = e
        this.getList()
      },
      maskClick(e) {
        // console.log(e, '日期选择器');
        this.queryParams.startTime = e[0]
        this.queryParams.endTime = e[1]
        this.getList()
      },
      // 查询汇付会员基本信息
      getList() {
        // console.log('queryParams', this.queryParams)
        getMerchantOrderReport(this.queryParams).then(
          (response) => {
            // console.log("查询报表", reportList, merchantOrderReport);
            // console.log('getMerchantOrderReport 营收报表', response)
            if (response.data) {
              this.reportList = response.data.pageResponse.list;
              this.merchantOrderReport = response.data.merchantOrderReport;
              this.total = response.data.pageResponse.total
            } else {
              this.reportList = []
              this.merchantOrderReport = null
            }
          }
        );
      },

    },
    created() {
      this.queryParams.startTime = getDateTime.getDateStr(null, -7)
      this.queryParams.endTime = getDateTime.dateTimeStr('y-m-d') // 今天
      this.range = [this.queryParams.startTime, this.queryParams.endTime]
      // console.log(this.range, 'range');
      this.getList();
    }
  }
</script>

<style>
</style>